<!DOCTYPE html>
<html>
  <body>
    <canvas
      id="myCanvas"
      width="400"
      height="400"
      style="border: 1px solid #000000"
    >
      Your browser does not support the canvas element.
    </canvas>

    <script>
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");

      // 绘制大矩形
      ctx.beginPath();
      ctx.rect(50, 50, 300, 200); // 参数分别是：x坐标、y坐标、宽度、高度
      ctx.fillStyle = "#FF0000";
      ctx.fill();
      ctx.closePath();

      // 绘制四个小矩形
      function drawCornerRect(x, y, width, height, color) {
        ctx.beginPath();
        ctx.rect(x, y, width, height);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.closePath();
      }

      // 绘制四个角的小矩形
      drawCornerRect(40, 40, 20, 20, "#0000FF"); // 左上角
      drawCornerRect(320, 40, 20, 20, "#0000FF"); // 右上角
      drawCornerRect(40, 220, 20, 20, "#0000FF"); // 左下角
      drawCornerRect(320, 220, 20, 20, "#0000FF"); // 右下角

      // 添加事件监听，以便拖动小矩形来伸缩大矩形
      var isDragging = false;
      var offsetX, offsetY;

      canvas.addEventListener("mousedown", function (e) {
        if (e.target === canvas) {
          isDragging = true;
          offsetX = e.offsetX;
          offsetY = e.offsetY;
        }
      });

      canvas.addEventListener("mousemove", function (e) {
        if (isDragging) {
          var dx = e.offsetX - offsetX;
          var dy = e.offsetY - offsetY;
          var newWidth = 300 + dx;
          var newHeight = 200 + dy;
          if (newWidth > 100 && newHeight > 50) {
            ctx.clearRect(50, 50, 300, 200);
            ctx.beginPath();
            ctx.rect(50, 50, newWidth, newHeight);
            ctx.fillStyle = "#FF0000";
            ctx.fill();
            ctx.closePath();
          }
          offsetX = e.offsetX;
          offsetY = e.offsetY;
        }
      });

      canvas.addEventListener("mouseup", function (e) {
        isDragging = false;
      });
    </script>
  </body>
</html>
